<template>
  <div id="background">
    <div id="contain">
      <br />

      <h1>填写注册信息</h1>
      <form action="">
        <div class="form">
          <label>用户名：</label
          ><input type="text" v-model="nickName" />
        </div>
        <div class="form">
          <label>密码：</label
          ><input type="password" v-model="password" />
        </div>

        <div class="form">
          <label>邮箱号：</label><input type="text" v-model="email" />
        </div>
        <div class="form1">
          验证码：
          <input class="into" type="text" v-model="authCode" />
          <button @click="getCode()" class="code-btn" :disabled="!show">
            <span v-show="show">获取验证码</span>
            <span v-show="!show" class="count">{{ count }} s</span>
          </button>
        </div>
      </form>
      <button @click="handlefinish">提交</button>
    </div>
  </div>
</template>
<script>
import { SendRegisterCode,register } from "@/api";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
const TIME_COUNT = 60;
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    // 邮箱校验
    // 验证码校验
    return {
      
        nickName: "",
        password: "",
        email: "",
        authCode: "",
      
      show: true,
      count: "",
      timer: null,
      rules: {},
    };
  },

  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    handlefinish: function () {
      var regEmail =
        /^([A-Za-z0-9_\-\.\u4e00-\u9fa5])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,8})$/;
      if (this.email != "" && !regEmail.test(this.email)) {
        this.$message({
          message: "邮箱格式不正确",
          type: "error",
        });
        this.email = "";
      } else if (this.nickName === "") {
        //名字为空
        this.$message({
          message: "用户名不能为空",
          type: "error",
        });
      } else if (this.password === "") {
        //密码为空
        this.$message({
          message: "密码不能为空",
          type: "error",
        });
      } else if (this.authCode === "") {
        //验证码为空
        this.$message({
          message: "验证码不能为空",
          type: "error",
        });
      } 
      else {
        register({
          nickName:this.nickName,
           email:this.email,
           password:this.password,
           authCode:this.authCode
        }).then(({ data }) => {
          //保存数据到客户端
            window.sessionStorage.setItem('userInfo',JSON.stringify(data.data))
            //刷新头
            this.$store.commit('routeJump/updateRefreshHead');
           //跳转页面
           this.$store.commit("routeJump/toHome");
          }).catch((err) => {
            console.log(err);
          });
      }
    },
    // 向后端发请求的点击事件
    getCode() {
      let _this = this;
      if (this.email === "") {
        _this.$message.error("请先输入邮箱再点击获取验证码");
      } else {
        SendRegisterCode(this.email)
          .then(({ data }) => {
            if(data.code != 0){
              console.log("验证码发送失败")
            }
          })
          .catch((err) => {
            console.log(err);
          });
        if (!this.timer) {
          this.count = TIME_COUNT;
          this.show = false;
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= TIME_COUNT) {
              this.count--;
            } else {
              this.show = true;
              clearInterval(this.timer);
              this.timer = null;
            }
          }, 1000);
        }
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style scoped>
#background {
  width: 100%;
  height: 100%;
  background: url("../assets/img/背景图.jpg");
  background-size: 100% 100%;
  position: fixed;
  top: 0;
  left: 0;
}
#contain {
  width: 580px;
  height: 430px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffff;
  text-align: center;
  border-radius: 1px;
}
#contain h1 {
  color: rgb(17, 17, 17);
}
.form {
  color: rgb(11, 10, 10);
  margin-left: 13%;
  margin-top: 35px;
  font-size: 20px;
  text-align: left;
}
.form1 {
  color: rgb(11, 10, 10);
  margin-left: 18%;
  margin-top: 5px;
  font-size: 20px;
  text-align: left;
}
label {
  float: left;
  width: 5em;
  margin-right: 1em;
  text-align: right;
}
input,
textarea {
  margin-left: 10px;
  padding: 4px;
  border: solid 1px #b2b2b7;
  outline: 0;
  font: normal 13px/100% Verdana, Tahoma, sans-serif;
  width: 200px;
  height: 20px;
  background: #ffffff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px;
}
input:hover,
textarea:hover,
input:focus,
textarea:focus {
  border-color: #a0a0a7;
}
button {
  position: relative;
  height: 33px;
  width: 100px;
  background: rgba(244, 16, 4, 0.688);
  border-radius: 1px;
  margin-top: 38px;
  box-shadow: none;
  color: white;
  margin-left: 40px;
}
</style>
